<!DOCTYPE html>
<html lang="Zh" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link href="css/boostrap.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/vue/2.1.8/vue.min.js"></script>
    <script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.min.js"></script>
    <script src="//cdn.bootcss.com/vue-router/2.3.1/vue-router.min.js"></script>
</head>
<body>
<div id="app">
    <div class="row">
        <div class="col-xs-offset-2 col-xs-8">
            <div class="page-header">
                <h2>SocialGram</h2>
            </div>
        </div>
    </div>

    <div class="row">

        <div class="col-xs-offset-2 col-xs-2">
            <div style="height: 475px;overflow-y: scroll;overflow-x: hidden;">
                <ul id="api_list" class="list-group" style="width: 90%;height: inherit;">
                    <router-link class="list-group-item" active-class="active list-group-item"
                                 to="" tag="li">附近的人
                    </router-link>
                    <router-link class="list-group-item" active-class="active list-group-item"
                                 to="signUp" tag="li">注册
                    </router-link>
                </ul>
            </div>
        </div>

        <div class="col-xs-6">
            <div class="panel" style="height: 472px;overflow-y: scroll;overflow-x: hidden;">
                <div class="panel-body" style="padding: 0;">
                    <router-view></router-view>
                </div>
            </div>
        </div>

    </div>
</div>
<template id="userNearly">
    <h3>附近的人</h3>
</template>
<template id="signUp">
    <h3>注册</h3>
</template>
<template id="signIn">
    <h3>登录</h3>
</template>
<template id="checkAccount">
    <h3>检查账户是否存在</h3>
</template>
<template id="updatePassword">
    <h3>修改密码</h3>
</template>
</body>
<script type="text/javascript">
    const userNearly = Vue.extend({
        template: '#userNearly'
    })
    const signUp = Vue.extend({
        template: '#signUp'
    })
    const signIn = Vue.extend({
        template: '#signIn'
    })
    const checkAccount = Vue.extend({
        template: '#checkAccount'
    })
    const updatePassword = Vue.extend({
        template: '#updatePassword'
    })

    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    const routes = [
        {path: '', component: userNearly},
        {path: '/signUp', component: signUp},
        {path: '/signIn', component: signIn},
        {path: '/checkAccount', component: checkAccount},
        {path: '/updatePassword', component: updatePassword}
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
        routes // （缩写）相当于 routes: routes
    })

    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
        router
    }).$mount('#app')

    // 现在，应用已经启动了！
</script>
</html>